<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>列表学生信息 </title>
    <!--1. 引入jquery-->
    <!--<link rel="stylesheet" href="/webjars/jquery/3.6.4/jquery.min.js">-->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!--2. 引入bootstrap的样式-->
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--3. 引入bootstrap的js库-->
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .table{
            text-align: center;
        }
    </style>
    <script>
        //1. 添加学生
        function addUI(){
            //1.1 修改标题
            $("#title").html("添加学生")
            //1.2 清空数据
           // $("#form1")[0].reset()          // $("#form1")[0]: 将一个 jquey对象$("#form1")转换为dom对象
            document.forms[0].reset()
            //1.2 显示对话框
            $('#myModal').modal('show')
        }
        //2. 修改学生
        function updateUI(sid,sname,sex,age,addr,cid) {
            //2.1 修改标题
            $("#title").html("修改学生")
            //2.2 为对话框的各个组件赋值
            $("#sname").val(sname)
            $("#age").val(age)
            $("#addr").val(addr)
            $("#cid").val(cid)
            $("#sid").val(sid)          // 为表单隐藏域赋值
            //2.3 最后处理性别
            $("#sex1").prop("checked",sex == '男' )
            $("#sex2").prop("checked",sex == '女' )
            //2.3 弹出对话框
            $("#myModal").modal("show")
        }
        //3. 保存学生到数据库
        function save(){
            //3.1 定义要保存的url地址
            let url = "/student/add"
            if($("#sid").val()){        // $("#sid").val(): 取得表单隐藏域的值
                url = "/student/update"
            }
            //3.2 为表单的action赋值设置值
            document.forms[0].action = url
            //3.3 提交表单
            document.forms[0].submit()
        }
    </script>
</head>
<body>
   <div class="container">
       <div class="panel panel-primary">
           <div class="panel-heading">
               <h3 class="panel-title">
                   <h3>SpringBoot+BootStrap+Webjars+Thymeleaf+MybatisPlus整合开发</h3>
               </h3>
           </div>
           <table class="table table-hover table-striped">
               <tr>
                   <td>学号</td>
                   <td>姓名</td>
                   <td>性别</td>
                   <td>年龄</td>
                   <td>住址</td>
                   <td>所在班级</td>
                   <td>出生日期</td>
                   <td>操作</td>
               </tr>
               <tr th:each="stud : ${pr.rows}">
                   <td>[[${stud.sid}]]</td>
                   <td>[[${stud.sname}]]</td>
                   <td>[[${stud.sex}]]</td>
                   <td>[[${stud.age}]]</td>
                   <td>[[${stud.addr}]]</td>
                   <td>[[${stud.cid}]]</td>
                   <td>[[${stud.birth}]]</td>
                   <td>
                       <a href="#" class="btn btn-warning btn-sm" th:onclick="updateUI( [[${stud.sid}]],[[${stud.sname}]],[[${stud.sex}]],[[${stud.age}]],[[${stud.addr}]],[[${stud.cid}]])">修改</a>
                       <a th:href="'/student/delete/' + ${stud.sid}" onclick="return confirm('你真的要删除吗？')" class="btn btn-danger btn-sm">删除</a>
                   </td>
               </tr>
           </table>
           <div class="panel-footer text-right">
               <!--1. 添加学生-->

               <!--添加学生对话框-->
               <!-- Modal -->
               <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                   <div class="modal-dialog" role="document">
                       <div class="modal-content">
                           <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="title" style="text-align: left;">添加学生</h4>
                           </div>
                           <div class="modal-body">
                               <form class="form-horizontal" action="/student/add" method="post" id="form1" name="form1">
                                   <input type="hidden" name="sid" id="sid">
                                   <div class="form-group">
                                       <label  class="col-sm-2 control-label">姓名：</label>
                                       <div class="col-sm-10">
                                           <input type="text" class="form-control" id="sname" name="sname" placeholder="学生姓名">
                                       </div>
                                   </div>
                                   <div class="form-group">
                                       <label  class="col-sm-2 control-label">性别：</label>
                                       <div class="col-sm-10" style="text-align: left;">
                                           <div class="radio">
                                               <label>
                                                   <input type="radio" name="sex" id="sex1" value="男" checked>男
                                               </label>
                                               <label>
                                                   <input type="radio" name="sex" id="sex2" value="女" >女
                                               </label>
                                           </div>
                                       </div>
                                   </div>
                                   <div class="form-group">
                                       <label  class="col-sm-2 control-label">年龄：</label>
                                       <div class="col-sm-10">
                                           <input type="text" class="form-control" id="age" name="age" placeholder="学生年龄">
                                       </div>
                                   </div>
                                   <div class="form-group">
                                       <label  class="col-sm-2 control-label">住址：</label>
                                       <div class="col-sm-10">
                                           <input type="text" class="form-control" id="addr" name="addr" placeholder="学生住址">
                                       </div>
                                   </div>
                                   <div class="form-group">
                                       <label  class="col-sm-2 control-label">班级：</label>
                                       <div class="col-sm-10">
                                           <select class="form-control" name="cid" id="cid">
                                               <option th:each="c : ${classes}" th:value="${c.cid}">[[${c.cname}]]</option>
                                           </select>
                                       </div>
                                   </div>
                               </form>
                           </div>
                           <div class="modal-footer">
                               <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                               <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                           </div>
                       </div>
                   </div>
               </div>

               <!-- Button trigger modal -->
               <button type="button" class="btn btn-success btn-sm" onclick="addUI()" style="float:left;margin-top: 20px;">
                   添加学生
               </button>

               <nav aria-label="...">
                   <ul class="pagination">
                       <li class="disabled">
                           <a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                       </li>
                       <li th:class="${p == pr.page ? 'active' : ''}" th:each="p : ${#numbers.sequence(1,pr.pages)}">
                           <a th:href="'/student/findPage/'+${p} + '/5' ">
                               [[${p}]]
                           </a>
                       </li>
                       <li>
                           <a href="#" aria-label="Next">
                               <span aria-hidden="true">&raquo;</span>
                           </a>
                       </li>
                   </ul>
               </nav>
           </div>
       </div>
   </div>
</body>
</html>
